import React from "react";
import { observer } from "mobx-react-lite";
import { createStyles } from "antd-style";
import { Modal } from "antd";

import { globalStore } from "@/service";

// import Marketing from "./Marketing";
import LoginBox from "./LoginBox";

const LoginModal: React.FC = () => {
  const { styles } = useStyle()
  const { isOpenLoginModal, closeLoginModal } = globalStore;

  return <Modal
    className={styles.modal}
    centered
    width={500}
    open={isOpenLoginModal}
    onCancel={closeLoginModal}
    footer={null}
    destroyOnClose
  >
    <div className="h-[560px] flex justify-center">
      {/* <Marketing /> */}
      <LoginBox />
    </div>
  </Modal>
}

export default observer(LoginModal);


const useStyle = createStyles(({ css }, { modalPadding = 0, modalCloseIconTop = 12, modalCloseIconRight = 12 }: {
  modalPadding?: number,
  modalCloseIconTop?: number,
  modalCloseIconRight?: number,
} = {}) => ({
  modal: css`
    .ant-modal-content{
      overflow: hidden;
      padding: ${modalPadding}px;
      & > .ant-modal-close{
        top: ${modalCloseIconTop}px;
        right: ${modalCloseIconRight}px;
      }
    }
  `
}))
